<template>
<section>
    <el-container>
        <el-main class="pad-no">
            <section class="map-container" v-loading="mainLoing">
                <div id="container" style="width:880px;height:510px;"></div>
            </section>
        </el-main>
    </el-container>
</section>
</template>

<script>
import defaultConfig from './utils/config'
export default {
  data() {
    return {
      center: {
        lng: 116.404288,
        lat: 39.918242
      },
      circleR: 17000,
      mainLoing: false
    }
  },
  mixins: [defaultConfig.mixins],
  props: {
    changeEvt: Function,
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  watch: {
    // resuletPoint: {
    //   handler(newName, oldName) {
    //     this.resizePoint(newName);
    //   },
    //   immediate: false,
    //   deep: true
    // },
    // isShowModel:{
    //   handler(newName, oldName) {
    //     if(!newName&&this.$Map&&this.$Marker&&this.setPoint&&this.isEdit){
    //       // console.log('关闭时重置');
    //       this.resizePoint(this.setPoint);
    //     }
    //   },
    //   immediate: false,
    //   deep: false
    // }
  },
  mounted() {
    this.createMap()
  },
  methods: {
    createMap() {
      // const isEdit = this.isEdit
      // const point = this.setPoint
      const setCircleR = this.updateConfig.setCircleR
      this.mainLoing = true

      !!setCircleR && (this.circleR = Number(setCircleR))
      const centerlng = this.center.lng
      const centerlat = this.center.lat
      const map = new AMap.Map('container', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 10, // 初始化地图层级
        center: [centerlng, centerlat] // 初始化地图中心点
      })

      this.createCircle(map, centerlng, centerlat)

      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
        map.addControl(new AMap.ToolBar())
        map.addControl(new AMap.Scale())
      })
    },
    createCircle(map, centerlng, centerlat) {
      const circle = new AMap.Circle({
        center: new AMap.LngLat(centerlng, centerlat), // 圆心位置
        radius: this.circleR, // 半径
        strokeColor: 'rgb(51,136,255)', // 线颜色
        strokeOpacity: 1, // 线透明度
        strokeWeight: 3, // 线粗细度
        fillColor: 'rgb(51,136,255)', // 填充颜色
        fillOpacity: 0.35 // 填充透明度
      })
      const that = this

      circle.setMap(map)

      map.plugin(['AMap.CircleEditor'], function() {
        that.circleEditor = new AMap.CircleEditor(map, circle) // 创建圆形编辑器对象
        that.circleEditor.open() // 打开圆形编辑器
      })

      circle.on('change', that.moveRadius, this)

      var circleMarker = new AMap.Marker({
        position: new AMap.LngLat(centerlng, centerlat),
        zIndex: 1024
      })

      circleMarker.setMap(map)

      this.$marker = circleMarker
      this.$circle = circle
      this.$map = map
      this.mainLoing = false
    },
    moveRadius() {
      this.output()
    },
    setCircleRadius(radius) {
      this.$circle.setRadius(radius * 1000)
      this.output()
    },
    setCenter(lat, lng) {
      if (!!lat && !!lng) {
        this.center = {
          lng: lng,
          lat: lat
        }
        this.$circle.setCenter(new AMap.LngLat(lng, lat))
        this.$marker.setPosition(new AMap.LngLat(lng, lat))
        this.$map.setCenter(new AMap.LngLat(lng, lat))
      }
    },
    output() {
      if (
        Object.prototype.toString.call(this.changeEvt) === '[object Function]'
      ) {
        const radius = this.$circle.getRadius()
        this.changeEvt(radius)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.map--modelbox {
    #map {
        min-height: 400px;
    }

    .el-dialog__body {
        padding: 0;
    }

    .font-help {
        display: inline-block;
        margin-top: 20px;
    }

    & .map-main {
        .serch {
            position: relative;
            width: 100%;
            margin-bottom: 20px;
            z-index: 1;
        }

        .el-input-group__append {
            cursor: pointer;
        }

        .map-container {
            position: relative;
            z-index: 0;
        }
    }

    .bm-view {
        width: 100%;
        height: 300px;
    }
}
</style>
